<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>t.js</title>
<style>
	body { background:black; color:white; padding:40px; font-family: 'PT Sans', Helvetica, Arial, sans-serif;}
	a { color:#9bf; }
	p > span { display:inline-block; margin:0 10px; font-weight:bold; }
</style>
</head>
<body>
<div id="qunit"></div>
</body>
<script src="http://code.jquery.com/qunit/qunit-1.9.0.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/qunit/qunit-1.9.0.css">

<script src="t.min.js"></script>
<script type="t/template" id="test">

	<h1>{{=greeting}}</h1>
	<h2>{{=user.display_name}}</h2>

	{{user.address}}
		<address>{{%user.address}}</address>
	{{/user.address}}

	<h4>Friends</h4>

	{{@user.friends}}
		<a href="{{%_val.url}}">{{=_val.name}}</a><br>
	{{/@user.friends}}

	{{=not_a_value}}

	{{=not.a.value}}

	{{!not_a_value}}
		<p>Missing required information!</p>
	{{/!not_a_value}}

	{{user.display_name}}
		<p>Bacon ipsum {{=user.display_name}}?</p>
	{{:user.display_name}}
		This should not be here.
	{{/user.display_name}}

	{{not_a_value}}
		This should not be here.
	{{:not_a_value}}
		<p>Yes bacon ipsum {{=user.display_name}}!</p>
	{{/not_a_value}}

	{{@user.prefs}}

		<p><span>{{=_key}}</span>{{=_val}}</p>

	{{/@user.prefs}}

	<h4>Test Values</h4>
	{{@test_values}}

		<p>{{=_key}}<span id="{{=_key}}" data-val="{{%_val}}">{{=_val}}</span></p>

	{{/@test_values}}


</script>
<script>

	console.log(document.getElementById('test').innerHTML);

	test("t.js tests", function() {

		var div = document.createElement('div');
		var template = new t(document.getElementById('test').innerHTML);
		div.innerHTML = template.render({
			greeting: "Welcome!",
			user: {
				display_name: "Jason",
				address: "111 State St, Ithaca,<script>alert(1);<\/script> NY 14853",
				friends: [
					{name: "Kunal", url: "http://whatspop.com"},
					{name: "Francisco", url: "http://smalldemons.com"},
					{name: "Nick", url: "http://milewise.com"}
				],
				prefs: {
					Notifications: "Yes!",
					"Stay logged in": "No"
				}
			},
			test_values: {
				"true": true,
				"false": false,
				"zero": 0,
				"string_zero": "0",
				"null": null
			}
		});
		document.body.appendChild(div);
		console.log(div.innerHTML);

		ok(/<h1>Welcome!<\/h1>/.test(div.innerHTML), "Simple interpolation.");
		ok(/<h2>Jason<\/h2>/.test(div.innerHTML), "Name-spaced interpolation.");
		ok(/<address>/.test(div.innerHTML), "If block.");
		ok(/<p>Missing /.test(div.innerHTML), "If-not block.");
		ok(/<p>Bacon ipsum Jason\?<\/p>/.test(div.innerHTML), "If-else block (true).");
		ok(/<p>Yes bacon ipsum Jason\!<\/p>/.test(div.innerHTML), "If-else block (false).");
		ok(/<address>111 State St, Ithaca,&lt;script&gt;alert\(1\);&lt;\/script&gt; NY 14853<\/address>/.test(div.innerHTML), "Scrubbed interpolation.");
		equal(div.innerHTML.match(/>(?:Kunal|Francisco|Nick)</g).length, 3, "Array iteration.")
		equal(div.innerHTML.match(/>(?:Notifications|Yes!|Stay logged in|No)</g).length, 4, "Object key/val iteration.")

		// passing true as a value is a little not-sane but we'll print it for you
		equal(document.getElementById("true").innerHTML, "true", "Prints boolean true");
		equal(document.getElementById("zero").innerHTML, "0", "Prints zero");
		equal(document.getElementById("string_zero").innerHTML, "0", "Prints the string 0");
		equal(document.getElementById("false").innerHTML, "", "Does not print boolean false");
		equal(document.getElementById("null").innerHTML, "", "Does not print null");

		equal((new t("{{%quot}}")).render({quot: '"'}), "&quot;", "Escapes quotes properly")

	});



</script>
</html>